<!--  -->
<template>
  <div class="comment">
    <h1>商品评价</h1>
    <div class="comment-grade">
      <el-radio-group v-model="radio" @change="handleChange">
        <el-radio :label="1">全部</el-radio>
        <el-radio :label="2">好评</el-radio>
        <el-radio :label="3">差评</el-radio>
      </el-radio-group>
    </div>
    <div class="comment-detail">
      <ul>
        <li v-for="item in message" :key="item.id">
          <section class="comment-section">
            <div class="section-left">
              <img :alt="item.name" :src="item.msg" />
              <div>{{ item.name }}</div>
            </div>
            <div class="section-right">
              <div class="section-comment">{{ item.comment }}</div>
              <div class="section-time">
                {{ item.time | dateFormat }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品名:
                &nbsp;<span>{{ item.petname }}</span
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品属性: &nbsp;<span>{{ item.sku }}</span>
              </div>
              <div class="replyCount" v-show="item.replyCount > 0">
                <span class="span">店长回复：</span>
                {{ item.resources }}
              </div>
              <div class="section-count">点赞:{{ item.count }}</div>
            </div>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comment",
  data() {
    return {
      proId: "",
      radio: 1,
      message: [],
    };
  },
  created() {
    this.proId = this.$route.query.id;
    this.getComment();
  },
  methods: {
    async getComment() {
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysprocomment/getComment/${this.proId}`
      );
      console.log(res);
      if (res.code === 0) {
        this.message = [];
        res.page.list.forEach(async (item) => {
          var data = {};
          data.id = item.id;
          data.name = item.username;
          data.msg = item.header;
          data.petname = item.proName;
          data.time = item.createTime;
          data.count = item.likesCount;
          data.sku = item.skuValues;
          data.comment = item.description;
          data.replyCount = item.replyCount;
          if (item.replyCount) {
            const { data: res } = await this.$http.get(
              `/dqxmall/prosysprocomment/info/${item.id}`
            );
            data.resources =
              res.prosysProComment[res.prosysProComment.length - 1].description;
          }
          this.message.push(data);
        });
      }
    },
    async handleChange(val) {
      if (val === 1) {
        this.getComment();
      }
      if (val === 2) {
        const { data: res } = await this.$http.get(
          `/dqxmall/prosysprocomment/getComment/${this.proId}`
        );
        if (res.code === 0) {
          this.message = [];
          res.page.list.forEach(async (item) => {
            var data = {};
            if (item.star >= 3) {
              data.id = item.id;
              data.name = item.username;
              data.msg = item.header;
              data.petname = item.proName;
              data.time = item.createTime;
              data.count = item.likesCount;
              data.sku = item.skuValues;
              data.comment = item.description;
              data.replyCount = item.replyCount;
              if (item.replyCount) {
                const { data: res } = await this.$http.get(
                  `/dqxmall/prosysprocomment/info/${item.id}`
                );
                data.resources =
                  res.prosysProComment[res.prosysProComment.length - 1].description;
              }
              this.message.push(data);
            }
          });
        }
      }
      if (val === 3) {
        const { data: res } = await this.$http.get(
          `/dqxmall/prosysprocomment/getComment/${this.proId}`
        );
        // console.log(res);
        if (res.code === 0) {
          this.message = [];
          res.page.list.forEach(async (item) => {
            var data = {};
            if (item.star <= 2) {
              data.id = item.id;
              data.name = item.username;
              data.msg = item.header;
              data.petname = item.proName;
              data.time = item.createTime;
              data.count = item.likesCount;
              data.sku = item.skuValues;
              data.comment = item.description;
              data.replyCount = item.replyCount;
              if (item.replyCount) {
                const { data: res } = await this.$http.get(
                  `/dqxmall/prosysprocomment/info/${item.id}`
                );
                data.resources =
                  res.prosysProComment[res.prosysProComment.length - 1].description;
              }
              this.message.push(data);
            }
          });
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.comment {
  // background-color: rgb(245, 239, 239);
  box-sizing: border-box;
  width: 1200px;
  padding: 20px;
  h1 {
    height: 50px;
    padding: 30px;
    font-weight: 700;
    line-height: 50px;
    font-size: 50px;
  }
  .comment-grade {
    background-color: rgb(218, 212, 212);
    padding: 10px;
    border: 1px solid rgb(122, 112, 112);
  }
  .comment-detail {
    li {
      height: 100px;
      border-bottom: 1px solid rgb(122, 112, 112);
      padding: 10px 0;
      .comment-section {
        .section-left {
          float: left;
          padding: 0 30px;
          border-right: 1px solid rgb(85, 82, 82);
          height: 100px;
          img {
            height: 65px;
            width: 65px;
            margin: 5px 0;
          }
          width: 200px;
          box-sizing: border-box;
          margin-right: 20px;
          text-align: center;
          div {
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
          }
        }
      }
      .section-right {
        position: relative;
        .section-comment {
          margin: 10px 0;
          color: rgb(0, 0, 0);
          font-size: 18px;
          padding-right: 120px;
        }
        .section-time {
          color: rgb(83, 77, 77);
        }
        .section-count {
          position: absolute;
          right: 50px;
          top: 70px;
          cursor: pointer;
          color: rgb(250, 185, 7);
        }
        .replyCount {
          width: 600px;
          margin: 20px 0;
          color: rgb(0, 0, 0);
          font-size: 18px;
          padding-left: 20px;
          // 自动换行
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          .span {
            color: chocolate;
            font-size: 17px;
          }
        }
      }
    }
  }
}
</style>
